<template>
  <div class="app-container">

    <el-button type="primary" @click="handleAddGoods">创建商品</el-button>
    <div style="margin-top: 10px">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="出售中" name="1"></el-tab-pane>
        <el-tab-pane label="已售罄" name="2"></el-tab-pane>
        <el-tab-pane label="仓库中" name="3"></el-tab-pane>
      </el-tabs>
    </div>

    <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" fit highlight-current-row
              style="width: 100%;margin-top:30px;">
      <el-table-column align="center" label="权重">
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-input v-model="row.sort" class="edit-input" size="small"/>
            <el-button
              class="cancel-btn"
              size="small"
              icon="el-icon-refresh"
              type="text"
              @click="cancelEdit(row)"
            >
              取消
            </el-button>
          </template>
          <span v-else>{{ row.sort }}</span>
          <el-button
            v-if="row.edit"
            type="text"
            size="small"
            icon="el-icon-circle-check-outline"
            @click="confirmEdit(row)"
          >
            确定
          </el-button>
          <el-button
            v-else
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="row.edit=!row.edit"
          >
            修改
          </el-button>
        </template>

      </el-table-column>
      <el-table-column align="center" label="商品名称">
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height:50px"
            :src="scope.row.pic_url"
            :preview-src-list="[scope.row.pic_url]"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品类型">
        <template slot-scope="scope">
          {{typeShow[scope.row.type]}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="价格">
        <template slot-scope="scope">
          {{ scope.row.price}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="库存">
        <template slot-scope="scope">
          {{ scope.row.left_stock}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="销量">
        <template slot-scope="scope">
          {{ scope.row.real_sales}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.create_time}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleView(scope)"> 编辑</el-button>
          <el-button type="warning" size="mini" @click="handleUp(scope.row.id,0)"
                     v-if="activeName==1">下架
          </el-button>
          <el-button type="warning" size="mini" @click="handleUp(scope.row.id,1)"
                     v-if="activeName==3"> 上架
          </el-button>
          <el-button type="warning" size="mini" @click="handleUp(scope.row.id,0)"
                     v-if="activeName==2"> 下架
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope)"> 删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                @pagination="getList"/>
    <el-dialog :visible.sync="dialogVisible" :title="dialogType=='new'?'新增商品':'编辑商品'">
      <el-tabs v-model="goodsType" type="card" @tab-click="handleGoodsType">
        <el-tab-pane label="单品" name="1"></el-tab-pane>
        <el-tab-pane label="拼团" name="2"></el-tab-pane>
      </el-tabs>
      <el-tabs v-model="goodsInfo" type="card">
        <el-tab-pane label="基础信息" name="base">
          <el-form :model="goods" label-position="left" label-width="100px" >
            <el-form-item label="商品名称">
              <el-input v-model="goods.title"></el-input>
            </el-form-item>
            <el-form-item label="商品主图" required>
              <Upload v-if="dialogVisible==true" v-model="goods.pics" :pic_url="goods.pics"/>
              <p>只支持.jpg .png格式 建议尺寸：750*750像素，最多上传10张(至少一张)</p>
            </el-form-item>
            <el-form-item label="售卖价格" required>
              <el-input v-model="goods.price"></el-input>
            </el-form-item>
            <el-form-item label="商品库存" required>
              <el-input v-model="goods.total_stock" :disabled="goodsType=='2'?true:false" ></el-input>
            </el-form-item>
            <el-form-item label="已出售数" v-if="goods.type==1">
              <el-input v-model="goods.fake_sales"></el-input>
            </el-form-item>
            <el-form-item label="是否推荐" v-if="goods.type==1">
              <el-radio v-model="goods.is_recommend" :label="1">是</el-radio>
              <el-radio v-model="goods.is_recommend" :label="0">否</el-radio>
            </el-form-item>
            <el-form-item label="状态" style="margin-bottom: 30px;" required>
              <el-radio v-model="goods.status" :label="1">上架出售</el-radio>
              <el-radio v-model="goods.status" :label="0">放置仓库</el-radio>
            </el-form-item>
          </el-form>
          <div style="text-align:right;">
            <el-button type="default" @click="goNext('detail')">下一步</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品详情" name="detail">
          <Tinymce v-if="dialogVisible" v-model="goods.content" :height="400" width="100%"></Tinymce>
          <div style="text-align:right;">
            <el-button type="default" @click="goNext('base')">上一步</el-button>
            <el-button type="default" @click="goNext('item')">下一步</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="item">
          <el-form :model="goods" label-position="left" label-width="100px" style="width: 50%">
            <el-form-item label="预计年化分红">
              <el-input v-model="goods.yield" :disabled="dialogType=='edit'?true:false"></el-input>
            </el-form-item>
            <el-form-item label="收益方式"  >
              <el-select v-model="goods.earn_type" clearable placeholder="请选择" :disabled="dialogType=='edit'?true:false">
                <el-option key="1" label="按月分红，到期回款" value="1"></el-option>
                <el-option key="2" label="到期返还本金和收益" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="起投金额" v-if="goods.type==2">
              <el-select v-model="goods.limit_money" clearable placeholder="请选择" :disabled="dialogType=='edit'?true:false">
                <el-option key="1" label="1000" value="1000"></el-option>
                <el-option key="2" label="100" value="100"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="筹标时间" v-if="goods.type==2">
              <el-date-picker
                v-model="goods.raise_start_date"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期" :disabled="dialogType=='edit'?true:false">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="组团天数" v-if="goods.type==2">
              <el-input v-model="goods.raise_days" :disabled="dialogType=='edit'?true:false"></el-input>
            </el-form-item>
            <el-form-item label="标的周期" required>
              <el-select v-model="goods.cycle_type" clearable placeholder="请选择" :disabled="dialogType=='edit'?true:false">
                <el-option key="0" label="1天" :value="0"></el-option>
                <el-option key="1" label="15天" :value="1"></el-option>
                <el-option key="2" label="1个月" :value="2"></el-option>
                <el-option key="3" label="3个月" :value="3"></el-option>
                <el-option key="4" label="6个月" :value="4"></el-option>
                <el-option key="5" label="9个月" :value="5"></el-option>
                <el-option key="6" label="1年" :value="6"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="虚拟成团" style="margin-bottom: 30px;" v-if="goods.type==2">
              <el-radio v-model="goods.is_virtual" :label="1" :disabled="dialogType=='edit'?true:false">是</el-radio>
              <el-radio v-model="goods.is_virtual" :label="0" :disabled="dialogType=='edit'?true:false">否</el-radio>
            </el-form-item>
            <el-form-item label="新人专享" style="margin-bottom: 30px;">
              <el-radio v-model="goods.is_new" :label="1" :disabled="dialogType=='edit'?true:false">是</el-radio>
              <el-radio v-model="goods.is_new" :label="0" :disabled="dialogType=='edit'?true:false">否</el-radio>
            </el-form-item>
          </el-form>
          <div style="text-align:right;">
            <el-button type="danger" @click="dialogVisible=false">取消</el-button>
            <el-button type="default" @click="goNext('detail')">上一步</el-button>
            <el-button type="primary" @click="saveData">保存</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>

    </el-dialog>

  </div>
</template>

<script>
  import waves from '@/directive/waves' // waves directive
  import Tinymce from '@/components/Tinymce'
  import Upload from '@/components/Upload/SingleImage3'

  import Pagination from '@/components/Pagination'
  import { addGood, deleteGood, getGoods, showGood, sortGood, updateGood, upGood } from '../../api/goods'

  const statusShow = {
    0: '未领取',
    1: '已领取'
  }
  const typeShow = {
    1: '普通',
    2: '拼团'
  }
  export default {
    components: { Pagination, Upload, Tinymce },
    directives: { waves },

    filters: {
      statusFilter(status) {
        const statusMap = {
          2: 'info',
          1: 'success'
        }
        return statusMap[status] ?? 'danger'
      },
      statusShowFilter(status) {
        return statusShow[status] ?? '无'
      }
    },
    data() {
      return {
        typeShow,
        statusShow,
        activeName: '0',
        goodsInfo: 'base',
        goodsType: '1',
        goods: {
          total_stock:1,
          type:1
        },
        specs: [],
        daterange: [],
        data: {},
        list: [],
        dialogVisible: false,
        dialogType: 'new',
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      goNext(activeName) {
        this.goodsInfo = activeName
      },
      cancelEdit(row) {
        row.sort = row.originalSort
        row.edit = false
        this.$message({
          message: '取消修改权重',
          type: 'warning'
        })
      },
      confirmEdit(row) {
        sortGood(row.id, { sort: row.sort }).then(res => {
          row.edit = false
          row.originalSort = row.sort
          this.$message({
            message: '权重已修改',
            type: 'success'
          })
        })
      },
      handleClick(tab, event) {
        if (tab.name == '0') {
          delete this.listQuery.search_type
        } else {
          this.listQuery.search_type = tab.name
        }
        this.getList()
      },
      handleGoodsType(tab, event) {
        if (tab.name == '1') {
          this.goods.type = 1

        }
        if (tab.name == '2') {
          this.goods.type = 2

        }
      },
      async saveData() {
        const isEdit = this.dialogType === 'edit'
        if (isEdit) {
          let id = this.goods.id
          delete this.goods.id
          await updateGood(id, this.goods)
        } else {
          await addGood(this.goods)
        }
        this.getList()
        this.dialogVisible = false
        this.$notify({
          title: 'Success',
          message: '操作成功！',
          type: 'success'
        })
      },
      handleAddGoods() {
        this.goodsType = '1'
        this.goodsInfo = 'base'
        this.goods = {
          total_stock:1
        }
        this.dialogVisible = true
        this.dialogType = 'new'

      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      async getList() {
        this.listLoading = true
        const res = await getGoods(this.listQuery)
        const items = res.data.data
        this.total = res.data.total
        this.list = items.map(v => {
          this.$set(v, 'edit', false)
          v.originalSort = v.sort
          return v
        })
        this.listLoading = false
      },
      handleView(scope) {
        showGood(scope.row.id).then(res => {
          this.goods = res.data
          this.goodsInfo = 'base'
          this.goodsType = String(res.data.type)
          this.dialogVisible = true
          this.dialogType = 'edit'
        })

      },
      handleUp(id, status) {
        upGood(id, { status: status }).then(res => {
          this.$message.success('修改成功！')
          this.getList()
        })
      },
      handleDelete({ $index, row }) {
        this.$confirm('确定要删除此商品吗?', 'Warning', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async() => {
            await deleteGood({ ids: row.id })
            this.list.splice($index, 1)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
          .catch(err => {
            console.error(err)
          })
      },
      confirmGoods() {
      }
    }
  }
</script>
<style>
</style>
<style lang="scss" scoped>
  .app-container {
    .roles-table {
      margin-top: 30px;
    }

    .permission-tree {
      margin-bottom: 30px;
    }
  }
</style>
